<template>
	<view class="pages-team">
		<!-- #ifndef H5 -->
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" title="我的团队"
			color="#ffffff" :backgroundColor="primaryColor">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<!-- #endif -->
		<view class="flex-y-center pb-lg fill-base pl-lg pr-lg pt-lg">
			<image class="user-header" src="https://lbqny.migugu.com/admin/diy/default.png" mode="aspectFill"></image>
			<view class="pl-md">
				<view class="f-sm-title text-bold">何帅</view>
				<view class="flex-y-center">
					<text class="f-caption pr-sm">已入驻</text>
					<text class="f-caption pl-sm pr-sm b-r b-l" :style="{borderColor: primaryColor}">考核分: 80分</text>
					<text class="f-caption pl-sm">一级服务员</text>
				</view>
			</view>
		</view>
		<view class="flex-between pt-lg pb-lg fill-base mt-md pl-lg pr-lg">
			<view class="f-title text-bold">我的团队<text class="f-caption c-caption">（12人）</text></view>
			<view class="flex-center">
				<text class="f-caption" style="color: #774A25;">查看成员</text>
				<i class="iconfont icon-right text-bold ml-sm" style="font-size: 10px;color: #824D2E;"></i>
			</view>
		</view>
		<view class="radius-16 pt-lg fill-base mt-md pb-lg" :style="{boxShadow: `0px 1px 3px 0px #EEE`}">
			<view class="pl-lg pr-lg flex-between pb-lg">
				<text class="f-mini-title text-bold c-904000">公司账户</text>
			</view>
			<view class="flex-warp trade-list pt-sm">
				<view class="flex-1" v-for="(item,index) in tradeList" :key="index">
					<view class="text-bold f-sm-title c-904000 text-center">{{item.number}}</view>
					<view class="f-caption text-center" style="color: #AC7C66;">{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="mt-md fill-base pb-lg rel">
			<view class="flex-between pt-lg pl-lg pr-lg">
				<text class="f-title text-bold">全部类型</text>
			</view>
			<view class="pt-lg pl-lg pr-lg">
				<view class="flex-center">
					<view class="time-item flex-1 flex-center pl-md pr-md mb-md" @tap.stop="toCheckItem(index, 'date')" 
					:style="{backgroundColor: chooseInd == index ? primaryColor: '', borderColor: chooseInd == index ? primaryColor : '#ddd',color: chooseInd == index ? '#fff' : '#778498'}"
					v-for="(item,index) in dateList" :key="index" :class="[{'ml-md': index > 0}]">{{item.name}}</view>
				</view>
				<view class="flex-center pb-lg pt-lg" style="width: 100%;" v-if="chooseInd == 3">
					<view @tap.stop="toShowTime('start_time')" class="item-child flex-center flex-column flex-1">
						<view>开始时间</view>
						<view class="mt-sm" :style="{color:check_time.start_time ? primaryColor : '#999'}">
							{{check_time.start_time || '选择时间'}}
						</view>
					</view>
					<view @tap.stop="toShowTime('end_time')" class="item-child flex-center flex-column flex-1  b-1px-l">
						<view>结束时间</view>
						<view class="mt-sm" :style="{color:check_time.end_time ? primaryColor : '#999'}">
							{{check_time.end_time || '选择时间'}}
						</view>
					</view>
				</view>
			</view>
			<view class="flex-warp pl-lg pr-lg ">
				<view style="width: calc(50% - 10rpx)" class="pd-lg fill-body radius-16 mt-md" :class="[{'ml-md': index%2}]" v-for="(item,index) in incomeList" :key="index">
					<view class="f-sm-title">¥{{storeInfo.sale.today_price}}</view>
					<view class="flex-y-center">
						<text class="f-caption c-caption">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<w-picker mode="date" :startYear="startYear*1-10" :endYear="startYear"
			:value="curDay" :current="false" fields="day"
			@confirm="onConfirm($event)" :disabled-after="false" ref="day" :themeColor="primaryColor"
			:visible.sync="showDate">
		</w-picker>
		
		<view class="space-footer"></view>
		<view :style="{height: `${configInfo.tabbarHeight}px`}"></view>
		<tabbar :cur="3"></tabbar>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	import tabbar from "@/components/tabbar.vue"
	
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				tradeList: [
					{title: '总资产（元）', number: 156.22},
					{title: '冻结余额（元）', number: 5},
					{title: '可提现余额（元）', number: 50}
				],
				incomeList: [
					{name: '累计营业额（元）',type: ''},
					{name: '累计完成订单（单）',type: ''},
					{name: '退单量（单）',type: ''},
					{name: '退单率',type: ''},
					{name: '好评数',type: '',tips: ''},
					{name: '好评率',type: '',tips: ''},
					{name: '差评数',type: '',tips: ''},
					{name: '差评率',type: '',tips: ''},
				],
				dateList: [
					{name: '今日', id: 0, start_time: 0,end_time: 0},
					{name: '近7天', id: 1, start_time: 0,end_time: 0},
					{name: '近30日', id: 2, start_time: 0,end_time: 0},
					{name: '自定义', id: 3}
				],
				chooseInd: 2, // 默认选中近30日
				check_time: {
					start_time: '',
					end_time: ''
				},
				curDay: '',
				showDate: false,
				param: {
					start_time: '',
					end_time: ''
				},
				startYear: '',
				showKey: '',
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo
		}),
		async onLoad(options) {
			let cur_time = new Date(Math.ceil(new Date().getTime()))
			this.curDay = this.$util.formatTime(cur_time, 'YY-M-D')
			this.startYear = this.$util.formatTime(cur_time, 'YY')
			let today = this.$util.formatTime(cur_time, 'YY-M-D') + ' 23:59:59'
			let one = 3600 * 24 * 1000
			let time = this.$util.DateToUnix(today) * 1000
			
			this.dateList[0].start_time = this.$util.DateToUnix(this.$util.formatTime(cur_time, 'YY-M-D')) 
			this.dateList[0].end_time = this.$util.DateToUnix(today)
			this.dateList[1].start_time = this.$util.DateToUnix(this.$util.formatTime(time - 6 * one, 'YY-M-D')) 
			this.dateList[1].end_time = this.$util.DateToUnix(today)
			this.dateList[2].start_time = this.$util.DateToUnix(this.$util.formatTime(time - 29 * one, 'YY-M-D')) 
			this.dateList[2].end_time = this.$util.DateToUnix(today)
			
			this.param.start_time = this.$util.DateToUnix(this.$util.formatTime(time - 29 * one, 'YY-M-D'))
			this.param.end_time = this.$util.DateToUnix(today)
			this.initIndex()
		},
		async onShow() {},
		async onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		async onReachBottom() {},
		onShareAppMessage(e) {},
		methods: {
			...mapActions(['getConfigInfo']),
			async initIndex(refresh = false){
				if(refresh || !this.configInfo.id){
					this.getConfigInfo()
				}
				
			},
			initRefresh(){
				this.initIndex(true)
			},
			toCheckItem(val , type){
				this.chooseInd = val
				this.check_time = {
					start_time: '',
					end_time: ''
				}
			},
			toShowTime(key) {
				if (key == 'end_time' && !this.check_time.start_time) {
					this.$util.showToast({
						title: `请选择开始时间`
					})
					return
				}
				let showTime = this.check_time[key]
				if (showTime) {
					this.curDay = showTime
				}
				
				this.showKey = key
				this.showDate = true
			},
			async onConfirm(val) {
				let {
					start_time,
					end_time
				} = this.check_time
				let {
					showKey
				} = this
				let show_unit = this.$util.DateToUnix(showKey == 'month' ? `${val.result}-01` : val.result)
				let start_unit = start_time ? this.$util.DateToUnix(start_time) : 0
				let end_unit = end_time ? this.$util.DateToUnix(end_time) : 0
				let cur_month = this.$util.formatTime(new Date(Math.ceil(new Date().getTime())), 'YY-M-D')
				let cur_unit = this.$util.DateToUnix(cur_month) + 1
			
				let msgType = {
					month: '开始月份',
					start_time: '开始时间',
					end_time: '结束时间',
				}
			
				if (show_unit > cur_unit) {
					this.$util.showToast({
						title: `${msgType[showKey]}不能选择未来时间哦`
					})
					return
				}
			
				if (((showKey == 'start_time' && end_unit && end_unit < this.$util.DateToUnix(val
							.result)) ||
						(showKey == 'end_time' && start_unit && start_unit > this.$util.DateToUnix(val.result)))) {
					this.$util.showToast({
						title: `结束时间不能小于开始时间`
					})
					return
				}
				console.log(val)
				this.check_time[showKey] = val.result
				// if(showKey == 'end_time'){
				// 	this.chooseInd = -1
				// }
			},
		},
	}
</script>


<style lang="scss">
	.pages-team {
		.user-header{
			width: 85rpx;
			height: 85rpx;
			border-radius: 85rpx;
		}
		.b-l{
			border-left: 1px solid;
			line-height: 1;
		}
		.b-r{
			border-right: 1px solid;
		}
		.c-904000{
			color: #904000;
		}
		.time-item{
			height: 60rpx;
			border-radius: 60rpx;
			color: #778498;
			border: 1px solid #DDDDDD;
		}
	}
</style>
